<template>
  <div>
    <!-- 机器人验证弹框 -->
    <el-dialog
      class="non-robot-verify"
      v-model="showNonRobotVerify"
      title="非机器人验证"
      @close="onBeforeClose"
      align-center
    >
      <div class="captcha-container">
        <!-- 输入框 -->
        <el-input
          v-model="userImgCaptchaVal"
          placeholder="请输入图形验证码"
          class="captcha-input"
        >
        </el-input>

        <!-- 验证码图片 -->
        <img
          :src="imgCaptchaBase64"
          @click="updateImgCaptcha"
          class="captcha-img"
        />
      </div>

      <!-- 确认按钮 -->
      <div class="captcha-btn-container">
        <el-button type="primary" @click="confirmNonRobotVerify"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, toRefs, ref } from "vue";
import { getImgCaptcha } from "@/utils/api/Captcha.js";
import { ElMessage } from "element-plus";
import { loginByEmail } from "@/utils/api/User.js";
import { useMapMutations } from "@/store/index.js";
import { useRouter } from "vue-router";


let { setUserInfo } = useMapMutations({
  moduleName: "user",
  mapper: ["setUserInfo"],
});
let { swithAuth } = useMapMutations({
  moduleName: "user",
  mapper: ["swithAuth"],
});

let router = useRouter();
const defineProps = defineProps({
  showNonRobotVerify: {
    type: Boolean,
    default: false,
  },
  loginInfo: {
    type: Object,
    default: () => ({
      email: "",
      password: "",
    }),
  },
});

const emit = defineEmits(["close"]);
const imgCaptchaBase64 = ref("");
const imgCaptchaValue = ref("");
const userImgCaptchaVal = ref("");
const { showNonRobotVerify, loginInfo } = toRefs(defineProps);

async function onBeforeClose() {
  emit("close");
}

// 获取图形验证码
async function updateImgCaptcha() {
  try {
    const resImgCaptcha = await getImgCaptcha();
    console.log(resImgCaptcha);
    imgCaptchaBase64.value = resImgCaptcha.image;
    imgCaptchaValue.value = resImgCaptcha.captcha;
  } catch (error) {
    ElMessage.error("获取图形验证码失败");
    console.log(error);
  }
}

const confirmNonRobotVerify = async () => {
  if (userImgCaptchaVal.value.trim() === imgCaptchaValue.value.trim()) {
    console.log("用户登录凭据：", loginInfo.value);
    const loginRes = await loginByEmail(loginInfo.value);
    console.log(loginRes);
    if (loginRes !== null) {
      setUserInfo(loginRes);
      swithAuth();
      ElMessage.success("登录成功");
      setTimeout(() => {
        router.push("/space");
      }, 1000);
    } else {
      ElMessage.error("登陆失败，请稍后重试！");
    }
  }else {
    ElMessage.error("图形验证码错误，请重新输入！");
    updateImgCaptcha();
    userImgCaptchaVal.value = "";
  }
};
onMounted(() => {
  updateImgCaptcha();
});
</script>

<style scoped>
.non-robot-verify {
  max-width: 100px; /* 适配不同屏幕 */
  overflow: hidden; /* 隐藏溢出 */
}

.captcha-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.captcha-input {
  flex: 1; /* 让输入框自动占满剩余空间 */
}

.captcha-img {
  width: 60px;
  height: 25px;
  cursor: pointer;
  border-radius: 4px;
}

.captcha-btn-container {
  display: flex;
  justify-content: center;
}
</style>
